import React, { Component, useState } from 'react';
import { Container } from './stylee'

// import zhang from '../../assets/icon/zhang.png'
// import connect from './connect'
// @connect

import reqwest from 'reqwest';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
//alert
import Alert from '../../components/alert/index'
import Alert1 from '../../components/alert/index1'
import Alert2 from '../../components/alert/index2'

//样式
import 'antd/dist/antd.css'
//日期
import { DatePicker, Space ,Tabs ,Table, Select , Input, Modal, Button,Pagination} from 'antd';
const { RangePicker } = DatePicker;
//变中文

//下拉菜单
const { Option } = Select;
const { TabPane } = Tabs;

//表格

const getRandomuserParams = params => ({
//   results: params.pagination.pageSize,
//   page: params.pagination.current,
//   ...params,
});
function onChange(date, dateString) {
  console.log(date, dateString);
}

const dataSource = [
  {
    key: '1',
    number: 1,
    width: 10,
    odd: 'SL20190923002',
    setion: '教务处',
    data: '2019-09-23',
    style: '个人申领',
    liang: 3,
    person: '张俊',
    state: '部门未审核',
    caozuo: ''

  },
  {
    key: '2',
    number: 2,
    width: 10,
    odd: 'SL20190923002',
    setion: '教务处',
    data: '2019-09-23',
    style: '个人申领',
    liang: 3,
    person: '张俊',
    state: '部门未审核',
    caozuo: ''
  },
];

const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number',
    align: 'center',
  },
  {
    title: '申领单号',
    dataIndex: 'odd',
    key: 'odd',
    align: 'center',
  },
  {
    title: '申领部门',
    dataIndex: 'setion',
    key: 'setion',
    align: 'center',
  },
  {
    title: '申领日期',
    dataIndex: 'data',
    key: 'data',
    align: 'center'
  },
  {
    title: '申领类型',
    dataIndex: 'style',
    key: 'style',
    align: 'center',
  },
  {
    title: '申领数量',
    dataIndex: 'liang',
    key: 'liang',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'person',
    key: 'person',
    align: 'center',
  },
  {
    title: '当前状态',
    dataIndex: 'state',
    key: 'state',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'caozuo',
    key: 'caozuo',
    align: 'center',
    render: (text, record) => (
      <Space>
        {/* 审核 */}
        <a><App1 /></a>
        {/* 查看 */}
        <a><App2 /></a>
      </Space>
    ),
  },
];

//弹出框
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button className="batch" type="primary" onClick={showModal} >
      {/* <img src={zhang} alt="" /> */}
      <span>批量审核 - <i>9</i> </span>
      </Button>
      <Modal title="批量审核" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"确定"}  width={1000}>
          <Demo />
      </Modal>
    </>
  );
};
//弹出框内容
function callback(key) {
  console.log(key);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="张俊" key="1" style={{ height:350 }}>
      <Alert />
    </TabPane>
    <TabPane tab="申梦月" key="2" style={{ height:350 }}>
      <Alert1 />
    </TabPane>
    <TabPane tab="熊朝丹" key="3" style={{ height:350 }}>
      <Alert2 />
    </TabPane>
  </Tabs>
);
//审核弹出框
const App1 = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button className="batch" type="primary" onClick={showModal} type="none">
          审核
      </Button>
      <Modal title="申领单审核" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"确定"}  width={1000}>
          <Alert />
      </Modal>
    </>
  );
};
//查看弹出框
const App2 = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button className="batch" type="primary" onClick={showModal} type="none">
          查看
      </Button>
      <Modal title="申领单查看" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"确定"}  width={1000}>
          <Alert1 />
      </Modal>
    </>
  );
};
  class index extends Component {

    
    state = {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
      },
      loading: false,
    };

    componentDidMount() {
      const { pagination } = this.state;
      this.fetch({ pagination });
      // 在这里发送每个页面获取数据的请求
      // this.props.setSwiperData()
    }

    handleTableChange = (pagination, filters, sorter) => {
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        pagination,
        ...filters,
      });
    };

    fetch = (params = {}) => {
      this.setState({ loading: false });
      reqwest({
        url: 'https://randomuser.me/api',
        method: 'get',
        type: 'json',
        data: getRandomuserParams(params),
      }).then(data => {
        /* console.log(data); */
        this.setState({
          loading: false,
          data: data.results,
          pagination: {
            ...params.pagination,
            total: 200,
          },
        });
      });
    };




    render( ) {
      const { data, pagination, loading } = this.state;
      
      return (
        <Container>
          <div className='content'>
            <div className='select'>
              <App /> 
              {/* 日期组件 */}
              <div className='data'>
                <Space direction="vertical" size={12}>
                  <RangePicker locale={locale} />
                </Space>
              </div>
              {/* 下拉菜单 */}
              <div className='dropdown'>
                <Select
                  style={{ width: 150 }}
                  placeholder="全部申领部门"
                  optionFilterProp="children"
                  onChange={this.onChange}
                  onFocus={this.onFocus}
                  onBlur={this.onBlur}
                  onSearch={this.onSearch}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="store">全部申领部门</Option>
                  <Option value="xingzheng">教务处</Option>
                  <Option value="shiyan">办公室</Option>
                  <Option value="jiaming">信息中心</Option>
                  <Option value="dijing">总务处</Option>
                </Select>
              </div>
              <div className='dropdown'>
                <Select
                  style={{ width: 150 }}
                  placeholder="全部领用类型"
                  optionFilterProp="children"
                  onChange={this.onChange}
                  onFocus={this.onFocus}
                  onBlur={this.onBlur}
                  onSearch={this.onSearch}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="store">全部领用类型</Option>
                  <Option value="xingzheng">个人领用</Option>
                  <Option value="shiyan">部门领用</Option>
                  <Option value="jiaming">活动领用</Option>
                </Select>
              </div>
              <div className='dropdown'>
                <Select
                  style={{ width: 150 }}
                  placeholder="全部审核状态"
                  optionFilterProp="children"
                  onChange={this.onChange}
                  onFocus={this.onFocus}
                  onBlur={this.onBlur}
                  onSearch={this.onSearch}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value="store">全部审核状态</Option>
                  <Option value="xingzheng">未审核</Option>
                  <Option value="shiyan">审核未通过</Option>
                  <Option value="jiaming">审核通过</Option>
                </Select>
              </div>
              {/* 输入框 */}
              <div className='input'>
                <Input placeholder="申领单号" />
              </div>
              <div className='find'>查询</div>
            </div>
            {/* 表格 */}
            <div className='table'>
              <Table
                dataSource={dataSource}
                columns={columns}
                bordered
                // pagination={pagination}
                onChange={this.handleTableChange}
              />
            </div>



            <div>
                    <Pagination
                      className="sorter"
                      locale={locale}
                      total={85}
                      showSizeChanger
                      showQuickJumper
                      showTotal={total => `Total ${total} items`}
                    //  onChange={onChange} total={50} 
                    />
                  </div>




          </div>
        </Container>
      );
    }
  }

  export default index;
